<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔企业微云</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        .ranking .iconfont {
            color: #588FFF;
            margin-right: 10px;
            margin-top: 3px;
        }

        .modal .ranking {
            padding: 4px 13px 9px 0;
            margin-bottom: 3px;
        }

        .modal .ranking .number {
            color: #75D9FF;
            width: 4em;
            display: inline-block;
        }

        .ranking.num1 .iconfont, .modal .ranking.num1 .number {
            color: #ED3535;
        }

        .ranking.num2 .iconfont, .modal .ranking.num2 .number {
            color: #FB7D1B;
        }

        .ranking.num3 .iconfont, .modal .ranking.num3 .number {
            color: #FCDF1A;
        }

        .ranking .progress {
            background: rgba(27, 148, 255, 0.2);
            border-radius: 3px;
            overflow: visible;
        }

        .ranking .progress-bar {
            background: #588FFF;
            box-shadow: 0px -1px 5px 0px rgba(88, 143, 255, 0.5);
            border-radius: 3px;
        }

        .ranking.num1 .progress-bar {
            background: #ED3535;
            box-shadow: 0px -1px 5px 0px rgba(237, 53, 53, 0.5);
        }

        .ranking.num2 .progress-bar {
            background: #FB7D1B;
            box-shadow: 0px -1px 5px 0px rgba(255, 152, 0, 0.5);
        }

        .ranking.num3 .progress-bar {
            background: #FCDF1A;
            box-shadow: 0px -1px 5px 0px rgba(164, 146, 29, 1);
        }

        #usageRate_List .d-flex.align-items-center.justify-content-between span:last-child {
            width: 3em;
        }

        .electricity-sec {
            text-align: center;
            margin-bottom: 10px;
        }

        .electricity-sec .title {
            line-height: 30px;
            background: #001A2D;
        }

        .electricity-sec div:last-child {
            line-height: 32px;
        }

        .para-devider {
            border-bottom: 1px solid #00355A;
        }

        .elec-month-view, .elec-day-view {
            color: #D1D1D1;
        }

        .elec-month-view td, .elec-day-view td {
            padding: 1rem;
            border: 1px solid #293557;
        }

        .elec-month-view td:hover, .elec-day-view td:hover {
            background-color: #0056D4;
        }

        .elec-month-view td:hover .value, .elec-day-view td:hover .value {
            background-color: #0056D4;
            color: #fff;
        }

        .elec-month-view .title, .elec-day-view .title {
            text-align: right;
            font-size: 14px;
        }

        .elec-month-view .value, .elec-day-view .value {
            color: #83D0EF;
            font-family: DIN-Bold;
            text-align: center;
            margin-top: 15px;
            margin-bottom: 34px
        }

        .elec-day-view thead tr {
            background: transparent;
        }

        .elec-day-view th {
            padding: 1rem;
            color: #00E3D2;
            text-align: center;
        }

        .elec-day-view td {
            padding: 0.5rem;
            cursor: pointer;
        }

        .elec-day-view .title {
            font-size: 12px;
        }

        .elec-day-view .value {
            margin-top: -4px;
            margin-bottom: 12px
        }

        .border-special {
            border: 2px solid #0096FF;
            position: relative;
            line-height: 44px;
            width: 170px;
        }

        .border-special:before {
            content: '';
            position: absolute;
            width: 6px;
            height: 2px;
            background: #001a2d;
            top: -2px;
        }

        .border-special:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 2px;
            background: #001a2d;
            top: -2px;
        }

        .border-special.bigger {
            line-height: 80px;
            width: 313px;
            border-width: 4px;
        }

        .border-special.bigger:before {
            width: 10px;
            height: 4px;
            top: -4px;
        }

        .border-special.bigger:after {
            width: 10px;
            height: 4px;
            top: -4px;
        }

        .small-input-group .form-control {
            height: 24px;
            font-size: 12px;
        }

        .small-input-group .btn {
            font-size: 12px;
            line-height: 1;
            padding: 6px;
        }
    </style>
</head>
<body>
<div class="d-flex mt-3">
    <div class="border-section" style="width: 454px">
        <div class="section-title">用电统计
            <span class="title-icon"></span>
        </div>
        <div class="d-flex mx-n3" style="margin-top: 18px">
            <div class="flex-1">
                <div class="electricity-sec">
                    <div class="title font-p14">当前电价</div>
                    <div class="font-p12 text-emphasize">
                        <span class="font-p16 text-bolder text-month" id="currentPrice">0</span> 元/kWh
                    </div>
                </div>
                <div class="electricity-sec">
                    <div class="title font-p14">当日电费</div>
                    <div class="font-p12 text-emphasize">
                        <span class="font-p16 text-bolder text-purple" id="today">0</span> 万元
                    </div>
                </div>
            </div>
            <div class="flex-1" style="margin: 0 24px">
                <div class="electricity-sec">
                    <div class="title font-p14">昨日电价</div>
                    <div class="font-p12 text-emphasize">
                        <span class="font-p16 text-bolder text-month" id="yesterdayPrice">0</span> 元/kWh
                    </div>
                </div>
                <div class="electricity-sec">
                    <div class="title font-p14">昨日电费</div>
                    <div class="font-p12 text-emphasize">
                        <span class="font-p16 text-bolder text-purple" id="yesterday">0</span> 万元
                    </div>
                </div>
            </div>
            <div class="flex-1">
                <div class="electricity-sec">
                    <div class="title font-p14">上月电价</div>
                    <div class="font-p12 text-emphasize">
                        <span class="font-p16 text-bolder text-month" id="lastMonthPrice">0</span> 元/kWh
                    </div>
                </div>
                <div class="electricity-sec">
                    <div class="title font-p14">本月电费</div>
                    <div class="font-p12 text-emphasize">
                        <span class="font-p16 text-bolder text-purple" id="month">0</span> 万元
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex mx-n3">
            <div class="flex-fill electricity-sec">
                <div class="title font-p16">实时有功</div>
                <div class="font-p12 text-emphasize">
                    <span class="font-p16 text-bolder text-powerOn" id="ssyg_id">0</span> kW
                </div>
            </div>
            <div class="flex-fill electricity-sec">
                <div class="title font-p16">实时无功</div>
                <div class="font-p12 text-emphasize">
                    <span class="font-p16 text-bolder text-powerOn" id="sswg_id">0</span> kVar
                </div>
            </div>
            <div class="flex-fill electricity-sec">
                <div class="title font-p16">功率因数</div>
                <div class="font-p12 text-emphasize">
                    <span class="font-p16 text-bolder text-powerOn" id="glys_id">0</span>
                </div>
            </div>
            <div class="flex-fill electricity-sec">
                <div class="title font-p16">负载率</div>
                <div class="font-p12 text-emphasize">
                    <span class="font-p16 text-bolder text-powerOn" id="fzl_id">0 </span>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-1 border-section mx-3">
        <div class="section-title">用电分析
            <span class="title-icon"></span>
        </div>
        <div class="d-flex align-items-center">
            <div class="flex-1 d-flex justify-content-center align-items-end">
                <img src="../customize/images/analysis-score-lg.png" alt="">
                <div class="text-center mb-3" style="margin-left: 43px;">
                    <div class="text-emphasize">
                        <span class="font-p32 text-bolder" id="jkzs_id">0</span>
                        <span class="font-p12">分</span>
                    </div>
                    <div class="text-center">
                        <img style=" margin-left: -5px;" src="../customize/images/analysis-score-light.png" alt="">
                    </div>
                    <a class="explain-btn" href="##" data-toggle="modal" data-target="#JKZSModal">健康指数评分
                        <i class="iconfont icon-jieshiicon text-powerOff"></i></a>
                </div>
            </div>
            <div><img style="margin: 0 10px" src="../customize/images/analysis-divider.png" alt=""></div>
            <div class="flex-1 d-flex justify-content-between align-items-end" style="margin-right: 10px;">
                <div class="chart" id="chart_radar" style="height: 216px; width: 250px;"></div>
                <a class="explain-btn" href="##" style="margin-bottom: 30.5px" data-toggle="modal"
                   data-target="#NHLDModal">能耗雷达图
                    <i class="iconfont icon-jieshiicon text-powerOff"></i></a>
            </div>
        </div>
    </div>
    <div class="border-section d-flex" style="width: 538px">
        <div class="flex-1 ml-n3">
            <div class="section-title ml-3">设备状态
                <span class="title-icon"></span>
            </div>
            <div class="chart" id="chart_pie1" style="height:237px;"></div>
        </div>
        <div class="flex-1 mr-n3">
            <div class="section-title mr-3">定保状态
                <span class="title-icon"></span>
            </div>
            <div class="chart" id="chart_pie2" style="height: 237px;"></div>
        </div>
    </div>
</div>
<div class="d-flex my-3">
    <div class="border-section" style="width: 454px">
        <div class="section-title">生产时长
            <span class="title-icon"></span>
            <div class="font-p12 float-right mt-2">
                <div class="input-group small-input-group">
                    <input type="text" class="form-control" placeholder="选择时间范围" id="duration_timepicker" autocomplete="off">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" onclick="switchWeek()"><i
                                class="iconfont icon-dituyechaxun"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-between mt-3">
            <div class="font-p12">当日生产时长<span class="font-p16 text-bolder ml-2 text-blue-a" id="todayTime">0h</span>
            </div>
            <div class="text-right">
                <div class="font-p12">本周生产时长<span class="font-p16 text-bolder ml-2 text-month"
                                                  id="thisWeekTime">0h</span></div>
                <div class="font-p12 mt-1">
                    <span class="text-powerOff">同比上周</span>
                    <span class="text-fault" id="hbsz_id">-78.21%</span>
                </div>
            </div>
            <div class="text-right">
                <div class="font-p12">本月生产时长<span class="font-p16 text-bolder ml-2 text-purple"
                                                  id="thisMonthTime">0h</span></div>
                <div class="font-p12 mt-1">
                    <span class=" text-powerOff">环比上月</span>
                    <span class="text-red" id="hbsy_id">+10%</span>
                </div>
            </div>
        </div>
        <div class="chart mb-2" id="chart_bar2" style="height: 173px;margin-top: -6px"></div>
    </div>
    <div class="flex-1 border-section ml-3 d-flex">
        <div class="flex-2">
            <div class="section-title">今日用电量
                <span class="title-icon"></span>
                <a class="font-p12 float-right mt-2" href="##" data-toggle="modal" data-target="#MoreElecViewModal">更多 &gt;</a>
            </div>
            <div class="text-center font-p14 mt-2">
                <img class="mr-2" src="../customize/images/icon/electricity-icon1.png" alt=""> 低谷
                <img class="mr-2 ml-3" src="../customize/images/icon/electricity-icon2.png" alt=""> 平段
                <img class="mr-2 ml-3" src="../customize/images/icon/electricity-icon3.png" alt=""> 高峰
            </div>
            <div class="chart mb-3" id="chart_bar1" style="height: 198px; margin-top: -6px"></div>
        </div>
        <div class="flex-1 ml-3 position-relative">
            <div class="text-center position-absolute" style="width:340px; top: 102px">
                <div class="text-bolder font-p24 text-powerOn" id="jrzyn"></div>
                <div class="font-p12 text-emphasize mb-1">kWh</div>
                <div class="font-p12">今日总用能</div>
            </div>
            <div class="chart" id="chart_pie3" style="height: 278px"></div>
        </div>
    </div>
</div>
<div class="d-flex">
    <div class="border-section" style="width: 454px">
        <div class="section-title">设备使用率
            <span class="title-icon"></span>
            <div class="d-flex font-p12 float-right mt-2 page-arrow" id="page_arrow">
                <a class="" id="page_arrow_left"><i class="iconfont icon-zuoqiehuanicon"></i></a>
                <a id="page_arrow_right"><i class="iconfont icon-youqiehuanicon"></i></a>
            </div>
        </div>
        <div class="font-p12 text-month mb-1 mt-2">总体设备使用率</div>
        <div class="d-flex align-items-center justify-content-start">
            <div class="progress custom-progress" style="height: 12px; width: 173px;">
                <div class="progress-bar custom-progress-bar" style="width: 0%" id="syl_wid_id"></div>
            </div>
            <div class="text-month font-p12 ml-2" id="syl_id">0%</div>
        </div>
        <div class="row font-p12 usage-wrapper" style="margin-top: 12px; margin-bottom: 13px" id="usageRate_List"></div>
    </div>
    <div class="flex-1 border-section mx-3">
        <div class="section-title">历史告警信息
            <span class="title-icon"></span>
        </div>
        <div class="chart" id="chart_bar3" style="height: 283px; margin-top: 21px;"></div>
    </div>
    <div class="border-section" style="width: 454px">
        <div class="section-title">时间稼动率排行
            <span class="title-icon"></span>
            <a class="font-p12 float-right mt-2" href="##" onclick="viewMoreJDL()">更多 &gt;</a>
        </div>
        <div id="utilization_List" style="margin-top: 5px;"></div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="JKZSModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="section-title mb-3">健康指数分析
                    <span class="title-icon"></span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-3 mb-5 text-blue-a bg-paragragh">健康指数指的是企业用电量的指数分析，分值越高越好。</div>
                <div class="mb-2 text-blue-a">计算公式为：</div>
                <div class="font-p14 text-month mb-4">电压偏差分值*25%+频率偏差分值*25%+三相不平衡分值*40%+负载率分值*5%+功率因数*5%</div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="NHLDModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="section-title">能耗雷达图
                    <span class="title-icon"></span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 para-devider">
                    <div class="text-month mb-2">1. 电压偏差：</div>
                    <div class="text-powerOff font-p16">
                        <div class="mb-1">△U=(U-UN)/UN*100%</div>
                        <div class="mb-1">式中：△U--电压偏差百分比；U--实际电压;UN--电网标称电压</div>
                        <div class="mb-1">范围+/-10%为正常，电压在范围内60分，正中间为100分，每个百分点为4分。</div>
                    </div>
                </div>
                <div class="p-2 para-devider">
                    <div class="text-month mb-2">2. 频率偏差：</div>
                    <div class="text-powerOff font-p16">
                        <div class="mb-1">频率偏差=实际偏差 - 标称频率</div>
                        <div class="mb-1">我国系统标称频率为50HZ，国外有60HZ的。频率偏差值可以放宽到±0.5HZ。</div>
                        <div class="mb-1">正常范围49.5-50.5，在这个范围内的都是100分，每超出0.5HZ扣1分。</div>
                    </div>
                </div>
                <div class="p-2 para-devider">
                    <div class="text-month mb-2">3. 三相不平衡：</div>
                    <div class="text-powerOff font-p16">
                        <div class="mb-1">MAX（相电流-三相平均电流）/三相平均电流</div>
                        <div class="mb-1">越小越好刚好低于10%为60分。每一个百分点±5分，满分100分。</div>
                    </div>
                </div>
                <div class="p-2 para-devider">
                    <div class="text-month mb-2">4. 负载率：</div>
                    <div class="text-powerOff font-p16">
                        <div class="mb-1">实际功率与额定功率的比值。</div>
                        <div class="mb-1">越高越好，百分之多少就是多少分。75-80为正常。</div>
                    </div>
                </div>
                <div class="p-2 para-devider">
                    <div class="text-month mb-2">5. 功率因数：</div>
                    <div class="text-powerOff font-p16">
                        <div class="mb-1">交流电路有功功率对视在功率的比值。</div>
                        <div class="mb-1">越高越好，百分之多少就是多少分。70-90为正常。</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="MoreElecViewModal" tabindex="-1">
    <div class="modal-dialog modal-lg" style="width: 950px; max-width: 950px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="section-title">用电量查询
                    <span class="title-icon"></span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="nav nav-underlines position-relative flex-1 mb-3">
                    <li class="nav-item"><a href="##" class="nav-link active"
                                            onclick="switchMoreElecSec(this, 0)">日视图</a></li>
                    <li class="nav-item"><a href="##" class="nav-link" onclick="switchMoreElecSec(this, 1)">月视图</a></li>
                </ul>
                <div class="more-elec-sec" id="more_elec_sec0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="text-blue-a font-p12 ">单位：万kWh</div>
                        <div>
                            <input class="form-control form-control-sm" id="elec_day_timepicker" placeholder="选择月份"
                                   style="border: none; height: 28px; color: #83D0EF" autocomplete="off">
                        </div>
                    </div>
                    <table class="table elec-day-view" id="elec_day_table">
                        <thead>
                        <tr>
                            <th>日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="more-elec-sec" id="more_elec_sec1" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="text-blue-a font-p12">单位：万kWh</div>
                        <div>
                            <input class="form-control form-control-sm" id="elec_month_timepicker" placeholder="选择年份"
                                   style="border: none; height: 28px; color: #83D0EF" autocomplete="off">
                        </div>
                    </div>
                    <table class="table elec-month-view" id="elec_month_table">
                        <tr>
                            <td>
                                <div class="title">一月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">二月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">三月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">四月</div>
                                <div class="value">18.234</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="title">五月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">六月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">七月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">八月</div>
                                <div class="value">18.234</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="title">九月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">十月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">十一月</div>
                                <div class="value">18.234</div>
                            </td>
                            <td>
                                <div class="title">十二月</div>
                                <div class="value">18.234</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="MoreElecDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl" style="width: 1620px; max-width: 1620px;">
        <div class="modal-content">
            <div class="modal-header">
                <div class="section-title">用电量查询
                    <span class="title-icon"></span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <a href="##" title="返回" onclick="backToElecView()"><i class="iconfont icon-xiahua"></i></a>
                    <span class="text-aqua ml-3" id="elecDetailDate"></span>
                </div>
                <div class="d-flex">
                    <div class="flex-1 bg-dark-cus p-3 position-relative">
                        <div class="text-aqua font-p20">电量结构</div>
                        <div class="chart" id="chart_pie4" style="height: 222px"></div>
                        <div class="text-center position-absolute" style="left: 32px;top: 82px;">
                            <div class="mb-1 text-powerOn font-p24 text-bolder border-special" id="elec_more_power">0.5214</div>
                            <div class="font-p12 text-emphasize">万kWh</div>
                        </div>
                    </div>
                    <div class="flex-1 bg-dark-cus p-3 position-relative mx-3">
                        <div class="text-aqua font-p20">电费结构</div>
                        <div class="chart" id="chart_pie5" style="height: 222px"></div>
                        <div class="text-center position-absolute" style="left: 32px;top: 82px;">
                            <div class="mb-1 text-powerOn font-p24 text-bolder border-special" id="elec_more_bill">0.3583</div>
                            <div class="font-p12 text-emphasize">万元</div>
                        </div>
                    </div>
                    <div class="flex-1 bg-dark-cus p-3">
                        <div class="text-aqua font-p20">平均电价</div>
                        <div class="text-center">
                            <div class="mb-3 text-powerOn font-p40 text-bolder border-special bigger mt-5 mx-auto" id="elec_more_price">
                                0.6872
                            </div>
                            <div class="font-p20 text-emphasize">元/kWh</div>
                        </div>
                    </div>
                </div>
                <div class="bg-dark-cus p-3 mt-3">
                    <div class="text-aqua font-p20">今日用电量</div>
                    <div class="text-center font-p14 mb-2">
                        <img class="mr-2" src="../customize/images/icon/electricity-icon1.png" alt=""> 低谷
                        <img class="mr-2 ml-3" src="../customize/images/icon/electricity-icon2.png" alt=""> 平段
                        <img class="mr-2 ml-3" src="../customize/images/icon/electricity-icon3.png" alt=""> 高峰
                    </div>
                    <div class="chart" id="chart_bar4" style="height: 286px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="JDLModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="section-title">时间稼动率
                    <span class="title-icon"></span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-row align-items-center mb-3">
                    <div class="col-auto">
                        <strong class="font-p14">条件查询：</strong>
                    </div>
                    <div class="col-auto">
                        <input class="form-control" id="deviceName" type="text" placeholder="设备名称">
                    </div>
                    <div class="col-auto">
                        <select class="form-control" id="deviceType">

                        </select>
                    </div>
                    <div class="col-auto">
                        <input class="form-control time-picker" name="" id="searchTimeBegin_time" type="deviceName"
                               placeholder="选择时间" style="min-width: 225px;" autocomplete="off">
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-primary" type="button"
                                onclick="loadMoreTimeUtilization(1,$('#searchTimeBegin_time').val(),$('#deviceName').val())">
                            <i class="iconfont icon-dituyechaxun"></i> 查询
                        </button>
                    </div>
                </form>
                <div class="mx-n3" id="moreTimeUtilizationList">
                    <!-- 每页10条，前3条带class：num1、num2、num3，其余不带（方便写的话，其他都带也没关系，数字需 >3） -->
                    <!--   <div class="bg-paragragh d-flex font-p14 ranking num1 align-items-center">
                         <span class="text-bolder number text-center">1</span>
                         <div class="flex-1">
                           <div class="d-flex justify-content-between">
                             <div>S12</div>
                             <div class="text-bolder">91.67%</div>
                           </div>
                           <div class="progress" style="height: 6px;">
                             <div class="progress-bar" style="width: 91.67%"></div>
                           </div>
                         </div>
                       </div>
                       <div class="bg-paragragh d-flex font-p14 ranking num2 align-items-center">
                         <span class="text-bolder number text-center">2</span>
                         <div class="flex-1">
                           <div class="d-flex justify-content-between">
                             <div>S12</div>
                             <div class="text-bolder">91.67%</div>
                           </div>
                           <div class="progress" style="height: 6px;">
                             <div class="progress-bar" style="width: 91.67%"></div>
                           </div>
                         </div>
                       </div>
                       <div class="bg-paragragh d-flex font-p14 ranking num3 align-items-center">
                         <span class="text-bolder number text-center">3</span>
                         <div class="flex-1">
                           <div class="d-flex justify-content-between">
                             <div>S12</div>
                             <div class="text-bolder">91.67%</div>
                           </div>
                           <div class="progress" style="height: 6px;">
                             <div class="progress-bar" style="width: 91.67%"></div>
                           </div>
                         </div>
                       </div>
                       <div class="bg-paragragh d-flex font-p14 ranking align-items-center">
                         <span class="text-bolder number text-center">4</span>
                         <div class="flex-1">
                           <div class="d-flex justify-content-between">
                             <div>S12</div>
                             <div class="text-bolder">91.67%</div>
                           </div>
                           <div class="progress" style="height: 6px;">
                             <div class="progress-bar" style="width: 91.67%"></div>
                           </div>
                         </div>
                       </div>-->
                </div>
                <div class="page_div page-simple mt-3" id="jdl_page"></div>
            </div>
        </div>
    </div>
</div>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/echarts.min.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/paging_simple.js"></script>
<script src="../plugins/jquery.cookie.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../customize/js/index.js"></script>
</body>
</html>